<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看全文页面</title>
    <base href="/">
    <script src="/js/axios.js/"></script>
    <script src="/js/vue.js"></script>
    <script src="/el/element.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
    <link rel="stylesheet" type="text/css" href="/el/element.css"/>
</head>
<body style="background-color: #ffffff">
<div id="app">
    <div th:replace="~{common/head-index::head}"></div>
    <div style="display: flex;justify-content:flex-start;">
        <div style="margin-left: 300px;margin-top: 60px">
            <div v-for="item in blogs">
                <div style="margin-left:300px;">
                    <h3>
                        {{item.blogContent.head}}
                    </h3>
                </div>
                <div style="margin-left:220px;">
                    <a href="/api/public/goHome"  style="font-size: 13px">返回首页</a>
                        <span  style="font-size: 13px">作者：[ {{item.blog.author}} ]
                            <a v-if="isSuport==false" @click="doSupport(item.blog.id)">
                               <img style="width: 28px" src="/img/newHeart2021White.png">
                            </a>
                            <a v-if="isSuport==true" @click="doSupport(item.blog.id)">
                               <img style="width: 28px" src="/img/newHeart2021Active.png">
                            </a>
                        </span>
                        <el-tag>阅读次数 ： {{item.blog.reding_num}}</el-tag>
                        <el-tag type="success">点赞数量 ： <span v-text="licksnum"></span></el-tag>
                        <el-tag type="info">发布时间 ： {{item.blog.send_time}}</el-tag>
                </div>
                <br>
                <div style="background: #ffffff;width: 1200px">
                    <span v-html="item.blogContent.content">{{item.blogContent.item}}</span>
                </div>
            </div>
        </div>
    </div>
    <hr style="background: #66afe9">
    <div style="margin-left: 300px">
        <h3>评论列表</h3>
        <div th:if="${session.SPRING_SECURITY_CONTEXT}!=null">
            <el-input v-model="content" type="textarea" style="width: 600px;" placeholder="发表神妙评论">
            </el-input>
            <el-button  @click="addContent()">发表</el-button>
        </div>
        <div style="display: flex; flex-wrap:wrap;">
            <div style="width:100%; height: 10%;display: flex; flex-wrap:wrap; "
                  v-for="item in comments">
                <span>
                    <el-avatar icon="el-icon-user-solid"
                               src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                    </el-avatar>
                </span>
                <span>
                    <div>
                        <span v-if="uid == item.comment.uid">
                            <span style="color: red">作者：</span>
                         </span>
                        <p v-html="item.comment.nickname"></p>
                        <p style="margin-top: 3px;">{{item.comment.content}}</p>
                    </div>
                         <p style="margin-top: 1px;color: #7d808e">{{item.comment.sent_time}}</p>
                </span>
            </div>

        </div>
    </div>
    <el-backtop />
</div>
</body>
<script>
    window.eventBus = new Vue();
    var app = new Vue({
        el: "#app",
        data: {
            blogs: [],
            comments: [],
            content : "",
            isLogin : false,
            uid : "",   //文章的作者
            user : {},
            isSuport : false,  //默认是可以为文章点赞
            liksId : [],//存放点赞过的 文章id
            licksnum : 0, //点赞的数量
            lastTime:0, //默认上一次点击时间为0
        },
        methods: {
            //点赞 与 取消点赞的方法
            likes(blogid){
                let _this = this
                if (this.isLogin == false){
                    _this.$message({
                        message: '请登录后再点赞吧！正在跳转到登录页面~！',//提示的信息
                        type:'danger',　　//类型是成功
                        duration:600,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                        onClose:()=>{
                            location.href="/api/public/go2Login"
                        }
                    });
                }
                //实现思路   用户点赞之后  不能再点赞     当页面刷新的时候 点赞状态需要保持
                //首先 先 判断 是可以点赞 还是已经点赞过了 点赞过了 再点击就取消点赞  fasle 表示可以点赞
                if (_this.isSuport ==false && this.isLogin == true){
                    //这是点赞
                    axios.get("/api/user/blog/supportBlog/" + blogid).then(function (resp) {
                        console.log("点赞成功！！！  _this.isSuport == true")
                        _this.isSuport = true;
                        _this.licksnum = _this.licksnum + 1;
                    })
                }else{
                    //这是取消点赞
                    axios.get("/api/user/blog/supportBlog/" + blogid).then(function (resp) {
                        console.log("取消点赞！！！  _this.isSuport == false")
                        _this.isSuport = false
                        _this.licksnum = _this.licksnum - 1;
                    })
                }
            },
            //点赞 与 取消 点赞
            doSupport(blogid){
                //需要限制用户点击次数
                //获取当前时间的时间戳
                console.log(blogid)
                let now = new Date().valueOf();
                let _this = this
                console.log(_this.isSuport)
                if(this.lastTime == 0){ //用户第一次点击
                    this.lastTime = now;
                    _this.likes(blogid)
                }else {
                    if ((now - this.lastTime) > 2000) {
                        //重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
                        this.lastTime = now;
                        _this.likes(blogid)
                    } else {
                        console.log('限制多次点击');
                    }

                }
            },
            //退出登录
            outLogin() {
                sessionStorage.clear()
                localStorage.clear()
            },
            //发表评论
            addContent(){
                let _this = this
                // console.log(_this.content)
                let comment = {
                    blogid : sessionStorage.getItem("blogId"),
                    content : _this.content,
                }
                console.log(sessionStorage.getItem("blogId"))
                axios.post("/api/user/comment/addComment",comment).then(function (resp) {
                    if (resp.data.code ==200){
                        _this.$message({
                            message: '发表评论成功 ！！',
                            type: 'success'
                        });
                    }
                    _this.findAll()
                    _this.content = ""
                })

            },
            //显示该文章的所有评论
            findAll(){
                let _this = this
                var blogId = sessionStorage.getItem("blogId")

                axios.get("/api/public/findCommnetById/" + blogId).then(function (resp) {
                    // console.log("-----------")
                    _this.comments = resp.data.data
                    // console.log(resp.data.data)
                })
            }
        },
        mounted() {
            var id = sessionStorage.getItem("id")
            var blogId = sessionStorage.getItem("blogId")
            let _this = this;

            axios.get("/api/public/whetherLogin").then(function (resp) {
                _this.isLogin = resp.data.data
                console.log("_------" + _this.isLogin)
                if (_this.isLogin ==true){
                    axios.get("/api/user/blog/isSupport/" + blogId).then(function (resp) {
                        // false 表示未点赞
                        _this.isSuport = resp.data.data
                        console.log(resp.data.data)
                    })
                }
            })


            axios.get("/api/public/findByContentId/" + id).then(function (resp) {
                _this.blogs.push(resp.data.data)
                _this.licksnum = resp.data.data.blog.likes_num
                _this.uid = resp.data.data.blog.uid
                // console.log(resp.data.data)
                // console.log(_this.blogs)
            })
            axios.get("/api/public/findCommnetById/" + blogId).then(function (resp) {
                _this.comments = resp.data.data

            })
        }
    })

</script>

